import { Radio, Space, Table, Tag } from 'antd';
import React, { useState } from 'react';
const topOptions = [
    {
        label: 'topLeft',
        value: 'topLeft',
    },
    {
        label: 'topCenter',
        value: 'topCenter',
    },
    {
        label: 'topRight',
        value: 'topRight',
    },
    {
        label: 'none',
        value: 'none',
    },
];
const bottomOptions = [
    {
        label: 'bottomLeft',
        value: 'bottomLeft',
    },
    {
        label: 'bottomCenter',
        value: 'bottomCenter',
    },
    {
        label: 'bottomRight',
        value: 'bottomRight',
    },
    {
        label: 'none',
        value: 'none',
    },
];
const columns = [
    // {
    //     title: 'Name',
    //     dataIndex: 'name',
    //     key: 'name',
    //     render: (text) => <a>{text}</a>,
    // },
    // {
    //     title: 'Age',
    //     dataIndex: 'age',
    //     key: 'age',
    // },
    // {
    //     title: 'Address',
    //     dataIndex: 'address',
    //     key: 'address',
    // },
    {
        title: '状态',
        key: '1',
        dataIndex: 'tags',
        render: (tags) => (
            console.log(tags),
            <span>
                {/* <Tag color={{color:'red'}}>
                </Tag> */}
                {tags.map((tag) => {
                    // let color = tag.length > 5 ? 'geekblue' : 'green';
                    let color = tag.length < 5 ? 'red' : 'blue';
                    if (tag === '1') {
                        color = 'volcano';
                    }
                    return (
                        <Tag color={color} key={tag}>
                            {tag.toUpperCase()}
                        </Tag>
                    );
                })}
            </span>
        ),
    },
    // {
    //     title: 'Action',
    //     key: 'action',
    //     render: (_, record) => (
    //         <Space size="middle">
    //             <a>Invite {record.name}</a>
    //             <a>Delete</a>
    //         </Space>
    //     ),
    // },
];
const data = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['1'],
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['1', '0'],
    },
];
const App = () => {
    // const [top, setTop] = useState('topLeft');
    // const [bottom, setBottom] = useState('bottomRight');
    return (
        <div>
            {/* <div>
                <Radio.Group
                    style={{
                        marginBottom: 10,
                    }}
                    options={topOptions}
                    value={top}
                    onChange={(e) => {
                        setTop(e.target.value);
                    }}
                />
            </div> */}
            <Radio.Group
            // style={{
            //     marginBottom: 10,
            // }}
            // options={bottomOptions}
            // value={bottom}
            // onChange={(e) => {
            //     setBottom(e.target.value);
            // }}
            />
            <Table
                columns={columns}
                // pagination={{
                //     // position: [top, bottom],
                // }}
                dataSource={data}
            />
        </div>
    );
};
export default App;